<template>
    <a-card hoverable :bordered="false" :style="{ width: '100%', marginBottom: '10px' }">
      <div class="chart">
        <div class="chart_title">
          <div class="chart_title_left">近七日办理</div>
        </div>
      </div>
      <div style="width: 100%; margin-top: 10px">
        <div id="jqrblcharts" style="width: 100%; height: 353px"></div>
      </div>
    </a-card>
  </template>
  <script setup>
  import { ref, onMounted } from "vue";
  import * as echarts from "echarts";
  import syApi from "@/api/home/sy";
  const chartsOptions = ref(null);
  onMounted(() => {
    getJqrblCount()
  });
  const getJqrblCount = () => {
    syApi.getJqrblCount().then((res) => {
        console.log(res)
        if (res.code == 200 && res.success) {
            initCharts(res.data)
        }else{
            console.log(e)
        }
    }).catch((e) => {
        console.log(e)
    })
  }
  
  const initCharts = (e) => {
    var chartsBox = document.getElementById("jqrblcharts");
    var myChart = echarts.init(chartsBox);
    let option = {
      grid: {
          left: '10%',   //距离左边的距离
          right: '10%', //距离右边的距离
          bottom: '8%',//距离下边的距离
          top: '15%' //距离上边的距离
          },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      toolbox: {
        feature: {
          dataView: { show: false, readOnly: false },
          magicType: { show: false, type: ["line", "bar"] },
          restore: { show: false },
          saveAsImage: { show: false },
        },
      },
      legend: {
        data: ["发货", "到货"],
      },
      xAxis: [
        {
          type: "category",
          data: e.date,
          axisPointer: {
            type: "shadow",
          },
          axisTick:{
              show:false // 不显示坐标轴刻度线
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "票",
          axisLabel: {
            formatter: "{value}",
          },
          axisLine:{
              show: true, 
              lineStyle:{
                  color: '#CCCCCC',
                  type:"dashed"
              }
          },
          splitLine:{
              show:false // 不显示网格线
          },
        },
        {
          type: "value",
          name: "吨",
          axisLabel: {
            formatter: "{value}",
          },
          axisLine:{
              show: false, 
              lineStyle:{
                  color: '#CCCCCC',
                  type:"dashed"
              }
          },
          splitLine:{
              show:false // 不显示网格线
          },
        },
      ],
      series: [
        {
          name: "发货",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value + "票";
            },
          },
          barWidth: 12, 
          data: e.fahuo_count,
          itemStyle: {
            normal: {
              color: "#0A30B7",
            },
          },
        },
        {
          name: "到货",
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              return value + "票";
            },
          },
          barWidth: 12, 
          data:  e.daohuo_count,
          itemStyle: {
            normal: {
              color: "#0E9CFF",
            },
          },
        },
        {
          name: "发货",
          type: "line",
          smooth:true,
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + "吨";
            },
          },
          data: e.fahuo_weight,
          itemStyle: {
            normal: {
              color: "#0A30B7",
            },
          },
          areaStyle: {
                // 添加渐变阴影
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    // 设置渐变色
                    offset: 0,
                    color: "#0A30B740", // 开始颜色
                  },
                  {
                    offset: 1,
                    color: "#0A30B740", // 结束颜色
                  },
                ]),
              }
        },
        {
          name: "到货",
          type: "line",
          smooth:true,
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + "吨";
            },
          },
          data: e.daohuo_weight,
          itemStyle: {
            normal: {
              color: "#0E9CFF",
            },
          },
          areaStyle: {
                // 添加渐变阴影
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    // 设置渐变色
                    offset: 0,
                    color: "#0E9CFF40", // 开始颜色
                  },
                  {
                    offset: 1,
                    color: "#0E9CFF40", // 结束颜色
                  },
                ]),
              }
        },
      ],
    };
    myChart.setOption(option);
  };
  </script>
  <style scoped>
  .chart_title {
    display: flex;
    align-items: center;
  }
  .chart_title_left {
    font-family: PingFang SC;
    font-weight: 700;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    color: #000000;
    padding: 2px 10px;
    border-left: 5px solid #68C1B2;
  }
  </style>
  